<template>
    <div class="container">
        <el-row>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>知识管理</el-breadcrumb-item>
                <el-breadcrumb-item>心理测评试题管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <el-row>
            <el-form :inline="true" :model="searchHeartMark" class="demo-form-inline">
                <el-form-item label="测评名称">
                    <el-input @clear="searchTest" clearable v-model="searchHeartMark.name"
                        placeholder="根据测评名称筛选试题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchTest">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-row>
            <el-table :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
                :data="testList" border style="width: 100%">
                <el-table-column width="80px" prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="title" label="题目">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" #default="scope" label="内容" width="500">
                    <span v-html="scope.row.content"></span>
                </el-table-column>
                <el-table-column prop="heartMark.name" label="所属测评">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="clickEdit(scope.row)" icon="el-icon-edit" type="primary"
                            size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="deleteTest(scope.row.id)"
                            size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination @current-change="changePage" background layout="total,prev, pager, next" :total="total">
            </el-pagination>
        </el-row>

        <el-row>
            <el-dialog @close="clearData" title="修改试题" :visible.sync="dialogFormVisible">
                <el-form :model="test">
                    <el-form-item label="题目" label-width="70px">
                        <el-input v-model="test.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" label-width="70px">
                        <quill-editor :options="editorOptions" v-model="test.content" resize="none"
                            size="auto"></quill-editor>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="clearData">取 消</el-button>
                    <el-button type="primary" @click="updateTest">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo: {
                pageNum: 1,
                pageSize: 10,
                heartIds: [],
            },
            searchHeartMark: {
                name: ''
            },
            testList: [],
            total: 0,
            test: {
                id: null,
                title: '',
                content: '',
                heartId: null,
            },
            editorOptions: {
                modules: {
                    toolbar: [['bold', 'italic', 'underline', 'strike']],
                },
                placeholder: '请输入试题内容'
            },
            dialogFormVisible: false,
        }
    },
    methods: {
        //根据心理测评名称查询试题
        searchTest() {
            if (this.searchHeartMark.name != false) {
                this.$http.get('heartMark/markids', { params: this.searchHeartMark })
                    .then((result) => {
                        if (result.data.status == 200) {
                            this.searchInfo.heartIds = result.data.data.toString()
                            this.$http.get('hearttest/byheartids', { params: this.searchInfo })
                                .then(res => {
                                    if (res.data.status == 200) {
                                        this.testList = res.data.data.list
                                        this.total = res.data.data.total
                                    }
                                })
                                .catch(err => {
                                    this.$message({
                                        message: '请求异常',
                                        type: 'error'
                                    })
                                })
                        }

                    }).catch((err) => {
                        this.$message({
                            message: '请求异常',
                            type: 'error'
                        })
                    });
            } else {
                this.queryList()
            }
        },
        // 分页查询所有试题
        queryList() {
            this.$http.get('hearttest/page', { params: this.searchInfo })
                .then(res => {
                    // console.log(res)
                    console.log(res.data)
                    if (res.data.status == 200) {

                        this.testList = res.data.data.list
                        this.total = res.data.data.total
                        // console.log(this.testList)
                    }
                })
                .catch(err => {
                    this.$message({
                        message: '请求异常',
                        type: 'error'
                    })
                })
        },

        //根据id删除试题
        deleteTest(id) {
            this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(`hearttest/${id}`)
                    .then(res => {
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.searchTest()
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                    .catch(err => {
                        this.$message({
                            message: '请求异常',
                            type: 'error'
                        })
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //点击编辑按钮
        clickEdit(row) {
            this.test = row
            this.dialogFormVisible = true
        },
        //页码改变
        changePage(num) {
            this.searchInfo.pageNum = num
            this.searchTest()
        },
        //清除数据
        clearData() {
            this.test = {
                id: null,
                title: '',
                content: '',
                heartId: null,
            }
            this.dialogFormVisible = false
        },
        //修改试题
        updateTest() {
            this.$http.put('hearttest', this.test)
                .then(res => {
                    if(res.data.status == 200){
                        this.$message({
                            message:'试题修改成功',
                            type:'success'
                        })
                        this.clearData()
                        this.searchTest()
                    }
                })
                .catch(err => {
                    this.$message({
                        message: '请求异常',
                        type: 'error'
                    })
                }
                )
        }
    },
    mounted() {
        // console.log('执行')
        this.queryList()
    }
}
</script>

<style scoped></style>